<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('查看订单详情')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="order-detail-view" th:object="${order}">
        <input id="orderSn" type="hidden" th:field="*{orderSn}"/>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>订单信息</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">订单编号：</label>
                            <div class="col-sm-8">
                                <input id="orderNo" name="orderNo" th:field="*{orderSn}" type="text"
                                       class="form-control" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">订单状态：</label>
                            <div class="col-sm-8">
                                <select name="orderStatus" class="form-control m-b" th:with="type=${@dict.getType('order_status')}" disabled>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{orderStatus}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">支付状态：</label>
                            <div class="col-sm-8">
                                <select name="payStatus" class="form-control m-b" th:with="type=${@dict.getType('pay_status')}" disabled>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{payStatus}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">订单金额：</label>
                            <div class="col-sm-8">
                                <input id="orderCost" name="orderCost" th:field="*{orderCost}" type="text"
                                       class="form-control" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">应付金额：</label>
                            <div class="col-sm-8">
                                <input id="payCost" name="orderCost" th:field="*{payCost}" type="text"
                                       class="form-control" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">下单时间：</label>
                            <div class="col-sm-8">
                                <input id="createTime" name="createTime"
                                       th:value="${#dates.format(order.createTime, 'yyyy-MM-dd HH:mm:ss')}"
                                       type="text"
                                       class="form-control" readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 第二块 -->
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>商品信息</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="table-responsive">
                            <table id="bootstrap-table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>下单备注</h5>
                    </div>
                    <div class="ibox-content">
                        <p th:utext="*{orderRemark}"></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>商家备注</h5>
                    </div>
                    <div class="ibox-content">
                        <p th:utext="*{shopRemark}"></p>
                    </div>
                </div>
            </div>
        </div>
        <!--<div class="row">-->
            <!--<div class="col-sm-12">-->
                <!--<div class="ibox float-e-margins">-->
                    <!--<div class="ibox-title">-->
                        <!--<h5>平台备注</h5>-->
                    <!--</div>-->
                    <!--<div class="ibox-content">-->
                        <!--<p th:utext="*{extraRemark}"></p>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>收货信息</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">收货人：</label>
                            <div class="col-sm-8">
                                <input id="receiver" name="receiver" th:field="*{receiver}" type="text"
                                       class="form-control" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">收货地址：</label>
                            <div class="col-sm-8">
                                <input id="receiveAddress" name="receiveAddress" th:field="*{receiveAddress}"
                                       type="text"
                                       class="form-control" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">手机号码：</label>
                            <div class="col-sm-8">
                                <input id="receiverPhone" name="receiverPhone" th:field="*{receiverPhone}" type="text"
                                       class="form-control" readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--第五块-->
<!--        <div class="row">-->
<!--            <div class="col-sm-12">-->
<!--                <div class="ibox float-e-margins">-->
<!--                    <div class="ibox-title">-->
<!--                        <h5>物流信息</h5>-->
<!--                    </div>-->
<!--                    <div class="ibox-content">-->
<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-3 control-label">快递公司名称：</label>-->
<!--                            <div class="col-sm-8">-->
<!--                                <input id="shipperName" name="shipperName" th:field="*{shipperName}" type="text"-->
<!--                                       class="form-control" readonly>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-3 control-label">快递单号：</label>-->
<!--                            <div class="col-sm-8">-->
<!--                                <input id="logisticsCode" name="logisticsCode" th:field="*{logisticsCode}" type="text"-->
<!--                                       class="form-control" readonly>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-3 control-label">手机号码：</label>-->
<!--                            <div class="col-sm-8">-->
<!--                                <input id="senderPhone" name="senderPhone" th:field="*{senderPhone}" type="text"-->
<!--                                       class="form-control" readonly>-->
<!--                            </div>-->
<!--                        </div>-->

<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-3 control-label">跟踪状态：</label>-->
<!--                            <div class="col-sm-8">-->
<!--                                <div class="radio-box" th:each="dict : ${@dict.getType('dayin_order_trace_status')}">-->
<!--                                    <input type="radio" th:id="${dict.dictCode}" name="traceStatus" th:value="${dict.dictValue}" th:field="*{traceStatus}">-->
<!--                                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->

<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-3 control-label">状态描述：</label>-->
<!--                            <div class="col-sm-8">-->
<!--                                <input id="traceDesc" name="traceDesc" th:field="*{traceDesc}" type="text"-->
<!--                                       class="form-control" readonly>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
    </form>

</div>


<div th:include="include::footer"></div>
<script type="text/javascript">
    var prefix = ctx + "back/shopOrder";

    $(function () {
        var options = {
            url: prefix + "/detailList",
            method: 'post',
            sidePagination: "server",
            showColumns: false,
            queryParams: {
                orderSn: $('#orderSn').val()
            },
            columns: [
                {
                    field: 'id',
                    title: 'ID',
                    visible: false
                },
                {
                    field: 'productSn',
                    title: '编号',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<label>商品编号：</label><span style="font-weight: bold">' + value + '</span>');
                        if (parseInt(row.productSkuId) !== 0 && row.productSkuCode != null) {
                            actions.push('<br/><label>sku编号：</label><span style="font-weight: bold">' + row.productSkuCode + '</span>');
                        }
                        return actions.join('');
                    }
                },
                {
                    field: 'productName',
                    title: '商品信息',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<span>' + value + '</span>');
                        if (parseInt(row.productSkuId) !== 0 && row.productAttr != null) {
                            let skuName = "";
                            let skuJsonData = JSON.parse(row.productAttr);
                            for (let i = 0; i < skuJsonData.length; i++) {
                                skuName += skuJsonData[i].key + ":" + skuJsonData[i].value + ";"
                            }
                            actions.push('<br/><span style="font-weight: bold">' + skuName + '</span>');
                        }
                        return actions.join('');
                    }
                },
                {
                    field: 'productCover',
                    title: '封面图',
                    formatter: function (value, row, index) {
                        // var thumbUrl = value + '?imageView2/1/w/64/h/64';
                        return $.common.sprintf("<img class='img-circle img-sm' data-height='%s' data-width='%s' data-target='%s'  style='border-radius: 0;' src='%s' data-src='%s'/>", 400, 'auto', 'self', value, value);
                    }
                },
                {
                    field: 'productBuyPrice',
                    title: '进货金额',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<label>进货价：</label><span style="font-weight: bold">' + value + '</span>');
                        actions.push('<br/><label>数量：</label><span style="font-weight: bold">' + row.productQuantity + '</span>');
                        actions.push('<br/><label>进货总价：</label><span style="font-weight: bold">' + row.totalBuyPrice + '</span>');
                        return actions.join('');
                    }
                },
                {
                    field: 'remark',
                    title: '商品备注'
                }]
        };
        $.table.init(options);
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/editActualFee", $('#form-order-editActualFee').serialize());
        }
    }
</script>
</body>
</html>
